<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-tree :data="treeData" :props="{ label: 'name', children: 'children' }" :expand-on-click-node="false" ref="tree" highlight-current default-expand-all @node-click="handleNodeClick" />
        </div>
      </el-col>
      <!--听力数据-->
      <el-col :span="20">
        <!--听力试题新增-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['exam:listen:add']">新增</el-button>
          </el-col>
          <!-- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> -->
        </el-row>
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="试题名称" prop="listenName" :show-overflow-tooltip="true" width="240" />
          <el-table-column label="类型" prop="listenType" :show-overflow-tooltip="true" width="150" />
          <el-table-column label="听力原声" align="center" width="330">
            <template #default="scope">
              <audio id="audio" controls="" preload="none">
                <source id="mp3" src="https://mpdown.kekenet.com/Sound/2020/10/cet620101302_0309819agp.mp3" />
              </audio>
            </template>
          </el-table-column>
          <el-table-column label="听力真题" align="center" width="120">
            <template #default="scope">
              <el-button type="primary" @click="tapTest(scope.row)">点击查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        
      </el-col>
    </el-row>
    <!-- <iframe :src="testSrc"></iframe> -->
    <!--听力新增弹窗-->
    <el-dialog title="试题新增" v-model="open" width="500px" append-to-body>
      <el-form ref="dataRef" :model="form" label-width="80px">
        <el-form-item label="试题名称" prop="listenName">
          <el-input v-model="form.listenName" placeholder="请输入试题名称" style="width: 250px" />
        </el-form-item>
        <el-form-item label="试题年份" prop="listenYear">
          <el-input-number v-model="form.listenYear" placeholder="年份" :min="2000" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.listenType" placeholder="请选择">
            <el-option v-for="dict in examList" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="听力资源" prop="listenUrl">
          <el-input v-model="form.listenUrl" placeholder="请输入听力资源地址" style="width: 250px" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { createOne, queryList, deleteOne } from "@/api/listen";
const columns = ref([
  {
    title: "试题名称",
    dataIndex: "listenName",
  },
  {
    title: "类型",
    dataIndex: "listenType",
    scopedSlots: { customRender: "listenType" },
  },
  {
    title: "听力原声",
    dataIndex: "listenUrl",
    scopedSlots: { customRender: "listenUrl" },
  },
  {
    title: "听力真题",
    dataIndex: "rsrKey",
    scopedSlots: { customRender: "rsrKey" },
  },
]);
const router = useRouter();
const { proxy } = getCurrentInstance();
const open = ref(false);
const loading = ref(false);
const form = ref({
  listenName: "",
  listenType: "",
  listenYear: 2023,
  listenUrl: "",
});
// 默认数据
const tableData = ref([]);
const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  listenYear: "",
  listenType: "",
});
const examList = ref([
  {
    label: "IELTS",
    value: "IELTS",
  },
  {
    label: "CET-4",
    value: "CET-4",
  },
  {
    label: "CET-6",
    value: "CET-6",
  },
]);

const testSrc = "http://viewer.apisev.cn/viewer/preview/remote?url=http://150.158.135.236:8888/down/HviIDqA6LWkt.md";
const treeData = ref([
  {
    name: "CET-6",
    children: [
      {
        type: "CET-6",
        name: "2020",
      },
      {
        type: "CET-6",
        name: "2019",
      },
      {
        type: "CET-6",
        name: "2018",
      },
    ],
  },
  {
    name: "CET-4",
    children: [
      {
        type: "CET-4",
        name: "2022",
      },
      {
        type: "CET-4",
        name: "2021",
      },
    ],
  },
  {
    name: "IELTS",
    children: [
      {
        type: "IELTS",
        name: "2022",
      },
      {
        type: "IELTS",
        name: "2021",
      },
    ],
  },
]);
// 提交事件
function submitForm() {
  createOne(form.value).then((res) => {
    console.log(res);
    proxy.$modal.msgSuccess("新建成功");
    open.value = false;
    const rsrKey = res.rsrKey;
    // 跳转编辑页面
    router.push("/learn/listen/new/" + rsrKey);
  });
}
// 节点点击事件
function handleNodeClick(e) {
  console.log(e);
  queryParams.value.listenYear = e.name;
  queryParams.value.listenType = e.type;
  handleQuery();
}
// 点击新增
function handleAdd() {
  open.value = true;
  // router.push("/learn/listen/new");
}

// 查询
function handleQuery() {
  queryList(queryParams.value).then((res) => {
    console.log(res);
    tableData.value = res.content;
  });
}
// 执行函数
function tapTest(row) {
  const rsrKey = row.rsrKey;
  router.push("/learn/detail/" + rsrKey);
  //window.open('http://viewer.apisev.cn/viewer/preview/remote?url=http://150.158.135.236:8888/down/HviIDqA6LWkt.md', "_blank");
  // window.location.href('')
}
handleQuery();
</script>
<style></style>
